<%@page contentType="text/html"%>
<%@page import="com.google.appengine.api.users.UserService"%>
<%@page import="com.google.appengine.api.users.UserServiceFactory"%>
<% UserService userService = UserServiceFactory.getUserService();
   if (userService.isUserLoggedIn()) {   	   	
%>
<!DOCTYPE html>
<html manifest="/cache.manifest">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="jquery.mobile-1.0.min.js"></script>

	<link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" charset="utf-8">
	
	function onBodyLoad() {
        
        $(document).ready(function () {
        		Ajax.persons();
                Context.load();
                Context.updateListPersons();
        });
	}
    </script>
    <script src="js/common_forms.js"></script>
    <script src="js/mobile.js"></script>
    <script src="js/ajax.js"></script>
        
  </head>
  <body onload="onBodyLoad()">
  	  
      <section id="persons_page" data-role="page" data-theme="b">
          <header data-role="header" data-theme="b" data-position="fixed" data-nobackbtn="true">
              <h1>Persons</h1>
              <a href="#form_person_page" data-transition="pop" data-icon="plus" class="ui-btn-right">Add</a>
          </header> 
          <div class="msg"><span class="ajaxMsg"></span> <span class="ajaxErr"></span></div>
          <section data-role="content">
              <ul id="listPersons" data-role="listview" data-inset="true" data-split-icon="delete">
                  
              </ul>
          </section>
      </section>
      
      <section id="form_person_page" data-role="page" data-theme="b">
          <header data-role="header" data-theme="b" data-position="fixed" data-nobackbtn="true">
              <a href="#persons_page" data-icon="back" class="ui-btn-left">Back</a>
              <h1>Add Person</h1>
          </header> 
          <section data-role="content">
              <form id="form_person" action="javascript:Context.submitPerson()">
                  <fieldset data-role="fieldcontain">
                      <label for="firstName">Firstname <span class="required">*<span></label>
                      <input id="firstName" type="text" name="firstName" required></input>
                  </fieldset>
                  <fieldset data-role="fieldcontain">
                      <label for="lastName">Lastname <span class="required">*<span></label>
                      <input id="lastName" type="text" name="lastName" required></input>	
                  </fieldset>
                  <input id="personBt" type="submit" name="personBt" value="Add"></input>
              </form> 
          </section>
      </section>
      
      <section id="tasks_page" data-role="page" data-theme="b">
          <header data-role="header" data-theme="b" data-position="fixed" data-nobackbtn="true">
              <a href="#persons_page" data-icon="back" class="ui-btn-left">Back</a>
              <h1>Tasks</h1>
              <a href="#form_task_page" data-icon="plus" class="ui-btn-right">Add</a>
          </header> 
          <div class="msg"><span class="ajaxMsg" /> <span class="ajaxErr" /></div>
          <section data-role="content">
              <ul id="listTasks" data-role="listview" data-inset="true" data-filter="true">
                  
              </ul>
          </section>
      </section>
      
      <section id="form_task_page" data-role="page" data-theme="b">
          <header data-role="header" data-theme="b" data-position="fixed" data-nobackbtn="true">
              <a href="#tasks_page" data-icon="back" class="ui-btn-left">Back</a>
              <h1>Add Task</h1>
          </header> 
          <section data-role="content">
              <form id="form_task" action="javascript:Context.submitTask()">
                  <fieldset data-role="fieldcontain">
                      <label for="label">Label <span class="required">*<span></label>
                      <input type="text" id="label" name="label" required></input>
                  </fieldset>
                  <fieldset data-role="fieldcontain">
                      <label for="description">Description <span class="required">*<span></label>
                      <textarea id="description" name="description" cols="40" rows="8" required></textarea>
                  </fieldset>
                  <input id="taskBt" type="submit" name="taskBt" value="Add"></input>
              </form>
          </section>
      </section>
      
      <section id="update_task_page" data-role="page" data-theme="b">
          <header data-role="header" data-theme="b" data-position="fixed" data-nobackbtn="true">
              <a href="#tasks_page" data-icon="back" class="ui-btn-left">Back</a>
              <h1>Update Task</h1>
              <a id="close_task_link" href="javascript:Context.closeTask()" data-icon="delete" class="ui-btn-right">Close</a>
          </header> 
          <section data-role="content">
              <form id="update_form_task" action="javascript:Context.submitUpdtTask()">
                  <fieldset data-role="fieldcontain">
                      <label for="ulabel">Label <span class="required">*<span></label>
                      <input type="text" id="ulabel" name="ulabel" required></input>
                  </fieldset>
                  <fieldset data-role="fieldcontain">
                      <label for="udescription">Description <span class="required">*<span></label>
                      <textarea id="udescription" name="udescription" cols="40" rows="8" required></textarea>
                  </fieldset>
                  <input id="taskUpdateBt" type="submit" name="taskBt" value="Update"></input>
              </form>
          </section>
      </section>
      
  </body>
</html>
<% } else {
	response.sendRedirect(userService.createLoginURL("/index.jsp"));
   } %>